<template>
  <div class="home_phone">
    <ITitle :title="'联系我们'"></ITitle>
    <div :class="{ flex_left_right: !isMobile(), home_main_m: !isMobile() }">
      <ICard class="flex_right phone_item" :row="item" v-for="(item, index) in dataList" :key="index">
        <template #default="{ row }">
          <div class="card_row" :class="{card_row_m: isMobile() }" > 
            <div class="row_title font_18 line_height_26"> {{ row.title }}</div>
            <div class="row_dis font_16 line_height_22">{{ row.dis }}</div>
          </div>
        </template>
      </ICard>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, defineAsyncComponent } from 'vue'
  import { isMobile } from '@/utils'

  const ICard = defineAsyncComponent(() => import('@/components/comm/ICard.vue'))
  const dataList = ref<any[]>([
    {
      dis: '郑州市经开区航海东路1508号中大门3号楼1层10号',
      img: 'address',
      title: 'Address',
    },
    {
      dis: '联系热线：0371-61802226',
      img: 'phone',
      title: 'Phone Number',
    },
    {
      dis: 'wangzengfa@haigouhaoche.com',
      img: 'email',
      title: 'E-mail',
    },
  ])
</script>
<style scoped lang="less">
  .home_phone {
    .phone_item {
      margin-top: 67px;
      position: relative;
      .card_row {
        position: absolute;
        bottom: 15%;
        left: 0;
        right: 0;
        color: #ffffff;
        text-align: center;
        .row_title {
          margin-bottom: 8px;
        }
      }
      .card_row_m{
         bottom:40px;
      }
    }
  }
</style>
